<script setup>
import { computed,unref, ref } from 'vue'
import BASE_URL from '@/utils/env'
import storage from '@/utils/storage'
import { onLoad } from '@dcloudio/uni-app'
import { useOrderData } from './hooks/useOrderData'
import {ORDER_STATE, ORDER_TYPE} from "@/global/const";
import PopupDialog from "@/global/components/popupDialog/PopupDialog.vue";
const userInfo = storage.get("userInfo")
const { getOrderDetail, order,addressData,handleOrderAction,loading,commentData,handleConfirm ,popDialogRef} = useOrderData(userInfo)

onLoad(option =>{
  getOrderDetail(option.id)
})
const updateOrderPromise = computed(() => order.value?.state === 0 && userInfo.id === order.value?.userId)
const deleteOrderPromise = computed(() => [-1,4].includes(order.value?.state) && userInfo.id === order.value?.userId)
const takeOrderPromise = computed(() => order.value?.state === 0 && userInfo.id !== order.value?.userId)
const confirmSendOrderPromise = computed(() => order.value?.state === 1 && userInfo.id === order.value?.receiveUserId)
const confirmTakeOrderPromise = computed(() => order.value?.state === 2 && userInfo.id === order.value?.userId)
const reviewOrderPromise = computed(() => order.value?.state === 3 && userInfo.id === order.value?.userId)

const handleToUpdateOrder = () => uni.navigateTo(
    {
      url: '/pages/createOrder/createOrder?type=to&fromAddressId='
          + order.value?.takeAddressId + '&toAddressId=' + order.value?.receiveAddressId
          + '&orderId=' + order.value?.id
    })

const handleAction = () => {
  handleOrderAction(unref(order),() => {
    const type = (order.value.state === 0  ||  order.value.state === 1) ? 'create' : 'recevie'
    uni.navigateTo({ url: '/pages/order/order?type=' + type  })
  })
}
const handleToReview = () => {
  popDialogRef.value?.open()
}
</script>

<template>
  <view class="orderdetail-container" :class="{ 'container-class': loading }">
  <blockquote v-if="loading">
    <u-loading-icon />
  </blockquote>
  <blockquote v-else>
    <uni-section class="order-info" title="订单信息" type="line">
      <template v-slot:right>
        <uni-tag  :text="ORDER_STATE[order?.state]?.name"  :style="{ backgroundColor: ORDER_STATE[order?.state]?.color, border:'none' }"/>
      </template>
      <uni-card v-if="order">
        <view class="order-number">
          <text>订单编号：</text>
          <text class="value">{{ order.id }}</text>
        </view>
        <view class="order-type">
          <text>订单类型：</text>
          <up-tag size="mini" :type="ORDER_TYPE[order.typeId].type" :text="order.typeName" />
        </view>
        <view class="order-date">
          <text>交易时间：</text>
          <text class="value">{{ order.createTime }}</text>
        </view>
        <view class="order-date">
          <text>备注：</text>
          <text class="value">{{ order.remark }}</text>
        </view>
      </uni-card>
      <view class="order-goods">
        <view class="image">
          <image :src="`${BASE_URL}/images/${order?.picture}`" mode="aspectFill" />
        </view>
        <view v-if="order" class="detail-info">
          <view class="title">{{ order.goodsName }}</view>
          <view>
            <text>物品重量：</text>
            <text class="value">{{ order.weight || 0.00 }} (kg)</text>
          </view>
          <view>
            <text>物品描述：</text>
            <text class="value">{{ order.description }}</text>
          </view>
          <view>
            <text>跑腿费￥：</text>
            <text  class="tips">{{ order.tips || 0.00 }} (元)</text>
          </view>
        </view>
      </view>
    </uni-section>

    <uni-section class="address-info" title="地址信息" type="line">
      <template v-slot:right>
        <uni-icons type="location-filled" size="25" />
      </template>
      <uni-card title="取货地址">
        <uni-title
            type="h3"
            :title="addressData?.takeAddress?.provinceName + addressData?.takeAddress?.address"
            class="address"
        />
        <view>
          <text>{{ addressData?.takeAddress?.name }}</text>
          <text class="phone">{{ addressData?.takeAddress?.phone }}</text>
        </view>
      </uni-card>
      <uni-card title="收货地址">
        <uni-title
            type="h3"
            :title="addressData?.receiveAddress?.provinceName + addressData?.receiveAddress?.address"
            class="address"
        />
        <view>
          <text>{{ addressData?.receiveAddress?.name }}</text>
          <text class="phone">{{ addressData?.receiveAddress?.phone }}</text>
        </view>
      </uni-card>
    </uni-section>

    <blockquote v-if="commentData?.id">
      <uni-section class="comment-info" title="评价信息" type="line">
        <template v-slot:right>
          <uni-icons type="chat-filled" size="25" />
        </template>
        <uni-card>
          <view class="item">
            <text>评分：</text>
            <uni-rate readonly :value="commentData.score"/>
          </view>
          <view class="item">
            <text>评价人：</text>
            <view class="address">{{ commentData.userName }}</view>
          </view>
          <view class="item-comment">
            <text>评价内容：</text>
            <view class="address">{{ commentData.content }}</view>
          </view>
          <view class="item">
            <text>评价时间：</text>
            <view class="address">{{ commentData.updateTime }}</view>
          </view>
        </uni-card>
      </uni-section>
    </blockquote>

    <view class="subBtn" v-if="updateOrderPromise">
      <up-button class="btn" @click="handleToUpdateOrder" type="primary">修改订单</up-button>
    </view>
    <view class="subBtn" v-else-if="deleteOrderPromise">
      <up-button class="btn"  @click="handleAction"  type="error">删除订单</up-button>
    </view>
    <view class="subBtn" v-else-if="takeOrderPromise">
      <up-button class="btn" @click="handleAction"  type="warning">接单</up-button>
    </view>
    <view class="subBtn"  v-else-if="confirmSendOrderPromise">
      <up-button @click="handleAction" class="btn" type="primary">确认送达</up-button>
    </view>
    <view class="subBtn" v-else-if="confirmTakeOrderPromise">
      <up-button class="btn" @click="handleAction"  type="error">确认收货</up-button>
    </view>
    <view class="subBtn" v-else-if="reviewOrderPromise">
      <up-button class="btn" @click="handleToReview"  type="success">去评价</up-button>
    </view>
  </blockquote>

    <popup-dialog title="填写评价" ref="popDialogRef" :confirm="handleConfirm">
      <template #default>
        <uni-forms label-position="top" label-width="120"  ref="form" :modelValue="commentData">
          <uni-forms-item label="评分" name="name">
            <uni-rate v-model="commentData.score"/>
          </uni-forms-item>
          <uni-forms-item label="评价内容" name="email">
            <uni-easyinput v-model="commentData.content" type="textarea" placeholder="请输入评价内容~"  />
          </uni-forms-item>
        </uni-forms>
      </template>
    </popup-dialog>
  </view>
</template>

<style scoped lang="scss">
:deep(.uni-dialog-content) {
  display: unset !important;
  padding: 0 30rpx;
  .uni-forms {
    padding: 0 30rpx;
  }
}
uni-page-body {
  //background-color: $u-primary-light;
  height: 100%;
}
:deep(.uni-page-head-btn) {
  display: block !important;
}
.state {
  color: #ffffff;
}
.orderdetail-container {
  background-color: $u-primary-light;
  padding: 20rpx 20rpx 160rpx 20rpx;
  //height: 100%;
}
.container-class {
  height: 100%;
}
:deep(.uni-section-content) {
  padding: 20rpx 0;
  .uni-card {
    margin-top: unset !important;
    display: flex;
    flex-direction: column;
    //opacity: .5;
    border-radius: 15rpx;
    .uni-card__content {
      .order-type  {
        margin: 10rpx 0;
      }
      .order-date {
        margin-bottom: 10rpx;
      }
      .value {
        color: $u-primary-dark;
      }
    }
  }
  .order-goods {
    padding: 20rpx 25rpx ;
    display: flex;
    justify-content: space-between;
    .image {
      width: 250rpx;
      height: 250rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
    .detail-info {
      padding: 25rpx 40rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        text-align: left;
        font-size: 30rpx;
        text-align: left;
      }
      view {
        display: flex;
        justify-content: space-between;
        text {
          font-size: 25rpx;
          color: $u-info-dark;
        }
        .tips {
          color: $u-error-dark;
        }
      }
    }
  }
}

.address-info {
  margin-top: 25rpx;
  .uni-section-header {
    .uniui-location-filled{
      color: $u-primary !important;
    }
  }
  :deep(.uni-card__content) {
    .phone {
      margin-left: 25rpx;
    }
  }
  .address {
    color: $u-primary !important;
  }
}
.comment-info {
  margin-top: 25rpx;
  .uni-section-header {
    .uniui-chat-filled{
      color: $u-primary !important;
    }
  }
  :deep(.uni-card__content) {
    .phone {
      margin-left: 25rpx;
    }
  }
  .address {
    color: $u-primary !important;
    word-break: break-word;
    text-align: left;
  }
  .item {
    display: flex;
    align-items: center;
    text {
      min-width: 140rpx;
    }
  }
  .item-comment {
    margin-top: 20rpx;
  }
  .item:nth-child(n+ 1) {
    margin-top: 20rpx;
  }
}
.subBtn {
  width: 100%;
  height: 150rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
  .btn {
    width: 100%;
    //background-color: #00aaff;
    color: #fff;
    border-radius: 40rpx;
  }
}
</style>
